<template>
  <div>
    <Breadcrumb :style="{margin: '24px 20px'}">
      <BreadcrumbItem>用户测量数据</BreadcrumbItem>
      <BreadcrumbItem>测量数据列表</BreadcrumbItem>
    </Breadcrumb>
    <Card :style="{padding: '24px', minHeight: '680px', background: '#fff', marginLeft: '20px'}">
      <Table border :data="tableData" style="width: 800px">
        <TableColumn prop="date" label="测量时间" width='120'>
        </TableColumn>
        <TableColumn prop="chestWidth" label="胸宽" width='80'>
        </TableColumn>
        <TableColumn prop="chestThickness" label="胸厚" width='80'>
        </TableColumn>
        <TableColumn prop="waistWidth" label="腰宽" width='80'>
        </TableColumn>
        <TableColumn prop="waistThickness" label="腰厚" width='80'>
        </TableColumn>
        <TableColumn prop="hipsWidth" label="臀宽" width='80'>
        </TableColumn>
        <TableColumn prop="hipsThickness" label="臀厚" width='80'>
        </TableColumn>
        <TableColumn prop="armLength" label="臂长" width='80'>
        </TableColumn>
        <TableColumn prop="legLength" label="腿长" width='80'>
        </TableColumn>
        <TableColumn prop="bodyLength" label="躯干长" width='80'>
        </TableColumn>
        <TableColumn prop="headLength" label="头部长" width='80'>
        </TableColumn>
        <TableColumn prop="height" label="身高" width='80'>
        </TableColumn>
        <TableColumn fixed="left" label="操作" width="100">
          <template slot-scope="scope">
            <Button @click="predict_handleClick(scope.row)" type="text" size="small">围度预测</Button>
            <Button @click="model_handleClick(scope.row)" type="text" size="small">人体模型重建</Button>
          </template>
        </TableColumn>
      </Table>
      <Dialog title="三维人体模型重建" :visible.sync="model_dialogFormVisible" width='1200px'>
        <Row>
          <Col :span="18">
          <Row :gutter="20">
            <Col :span="18">
            <div class="tips">重建人体模型指定的特征尺寸为：</div>
            </Col>
            <Col :span="6">
            <div class="btn" @click='getAndLoad'>点击加载人体模型</div>
            </Col>
          </Row>
          <Form :model="form" label-position='left'>
            <Row :gutter="20">
              <Col :span="6">
                <FormItem label="头长" :label-width="formLabelWidth">
                  <Input v-model="form.headLength" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="躯干长" :label-width="formLabelWidth">
                  <Input v-model="form.bodyLength" autocomplete="off"> type="number"</Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="肩宽" :label-width="formLabelWidth">
                  <Input v-model="form.shoulderWidth" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="臂长" :label-width="formLabelWidth">
                  <Input v-model="form.armLength" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="20">
              <Col :span="6">
                <FormItem label="胸围" :label-width="formLabelWidth">
                  <Input v-model="form.chestLength" autocomplete="off" width="60" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="胸宽" :label-width="formLabelWidth">
                  <Input v-model="form.chestWidth" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="胸厚" :label-width="formLabelWidth">
                  <Input v-model="form.chestThickness" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="腰围" :label-width="formLabelWidth">
                  <Input v-model="form.waistLength" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="20">
              <Col :span="6">
              <FormItem label="腰宽" :label-width="formLabelWidth">
                <Input v-model="form.waistWidth" autocomplete="off" type="number"></Input>
              </FormItem>
              </Col>
              <Col :span="6">
              <FormItem label="腰厚" :label-width="formLabelWidth">
                <Input v-model="form.waistThickness" autocomplete="off" type="number"></Input>
              </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="臀围" :label-width="formLabelWidth">
                  <Input v-model="form.hipsLength" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="臀宽" :label-width="formLabelWidth">
                  <Input v-model="form.hipsWidth" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="20">
              <Col :span="6">
                <FormItem label="臀厚" :label-width="formLabelWidth">
                  <Input v-model="form.hipsThickness" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="腿厚" :label-width="formLabelWidth">
                  <Input v-model="form.legThickness" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="腿长" :label-width="formLabelWidth">
                  <Input v-model="form.legLength" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
              <Col :span="6">
                <FormItem label="身高" :label-width="formLabelWidth">
                  <Input v-model="form.height" autocomplete="off" type="number"></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
          </Col>
          <Col :span="6">
          <img class="model_bg_img" src="../../assets/model_bg.jpg" alt="">
          </Col>
        </Row>
        <Dialog title="三维人体模型重建" :visible.sync="dialogModelVisible" width='800px' append-to-body>
          <div class="model-container" v-if="showModel">
            <div id="model-canvas"></div>
            <div class="btn">导出人体模型</div>
          </div>
        </Dialog>
      </Dialog>
      <Dialog title="围度预测" :visible.sync="predict_dialogFormVisible">
        <Form :model="form">
          <Row :gutter="20">
            <Col :span="8">
            <FormItem label="胸宽" :label-width="formLabelWidth">
              <Input v-model="form.chestWidth" autocomplete="off" type="number"></Input>
            </FormItem>
            </Col>
            <Col :span="8">
            <FormItem label="胸厚" :label-width="formLabelWidth">
              <Input v-model="form.chestThickness" autocomplete="off" type="number"></Input>
            </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="胸围" :label-width="formLabelWidth">
                <Input v-model="form.chestLength" autocomplete="off" type="number"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="20">
            <Col :span="8">
            <FormItem label="腰宽" :label-width="formLabelWidth">
              <Input v-model="form.waistWidth" autocomplete="off" type="number"></Input>
            </FormItem>
            </Col>
            <Col :span="8">
            <FormItem label="腰厚" :label-width="formLabelWidth">
              <Input v-model="form.waistThickness" autocomplete="off" type="number"></Input>
            </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="腰围" :label-width="formLabelWidth">
                <Input v-model="form.waistLength" autocomplete="off" type="number"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="20">
            <Col :span="8">
            <FormItem label="臀宽" :label-width="formLabelWidth">
              <Input v-model="form.hipsWidth" autocomplete="off" type="number"></Input>
            </FormItem>
            </Col>
            <Col :span="8">
            <FormItem label="臀厚" :label-width="formLabelWidth">
              <Input v-model="form.hipsThickness" autocomplete="off" type="number"></Input>
            </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="臀围" :label-width="formLabelWidth">
                <Input v-model="form.hipsLength" autocomplete="off" type="number"></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div slot="footer" class="dialog-footer">
          <Button @click="predict_dialogFormVisible = false">关 闭</Button>
          <Button type="primary" @click="getPredictData">预 测</Button>
        </div>
      </Dialog>
    </Card>
  </div>
</template>
<script>
  import * as THREE from 'three'
  import OrbitControls from 'three-orbitcontrols'
  import { OBJLoader } from 'three-obj-mtl-loader'
  // import * as OBJLoader from '../../utils/OBJLoader'
  export default {
    name: 'ModelShow',
    data() {
      return {
        measure_id: -1,
        formLabelWidth: '60',
        model_dialogFormVisible: false,
        predict_dialogFormVisible: false,
        dialogModelVisible: false,
        showModel: false,
        modelFile: '',
        form: {},
        tableData: [{
          date: '2022-2-10',
          cwidth: '330mm',
          cthickness: '239mm',
          wwidth: '257mm',
          wthickness: '186mm',
          hwidth: '336mm',
          hthickness: '242mm'
        }]
      }
    },
    mounted() {
      this.getMeasureData()
    },
    methods: {
      async getMeasureData() {
        const res = await this.$http.get('/measure/getUploadList', {
          params: {
            username: 'ljp'
          }
        })
        if (res.code === 200) {
          let measureData = res.data
          this.tableData = measureData
        }
      },
      model_handleClick(row) {
        this.form = row
        this.measure_id = row._id
        this.model_dialogFormVisible = true
      },
      predict_handleClick(row) {
        this.form = row
        this.predict_dialogFormVisible = true
      },
      async getPredictData() {
        const res = await this.$http.post('/measure/lengthPredict', {
          measure_data: {
            chestWidth: this.form.chestWidth,
            chestThickness: this.form.chestThickness,
            waistWidth: this.form.waistWidth,
            waistThickness: this.form.waistThickness,
            hipsWidth: this.form.hipsWidth,
            hipsThickness: this.form.hipsThickness
          }
        })
        if (res.code === 200) {
          const measureData = res.data
          this.form = { ...this.form, ...measureData }
          console.log(this.form)
        }
      },
      async getAndLoad() {
        this.dialogModelVisible = true
        this.showModel = true
        await this.getModel(this.measure_id)
      },
      async getModel(measure_id) {
        // 网络请求会报错，报错的数据即是文件内容
        await this.$http.post('/measure/getmodel', {
          sex: 'female',
          measure_data: {...this.form}
        })
        .then(err => {
          // console.log(err)
          this.modelFile = err
        })
        this.loadModel()
      },
      loadModel() {
        var container = document.querySelector('#model-canvas')
        /**
        * 创建场景对象Scene
        */
        var scene = new THREE.Scene()
        /**
         * 创建网格模型
         */
        // console.log('model', this.modelFile)
        const obj = new OBJLoader().parse(this.modelFile)
        // 模型放大一百倍
        obj.scale.set(80, 80, 80)
        // console.log(obj)
        scene.add(obj)
        // new OBJLoader().load('model/hello_smpl.obj', obj => {
        //   var material = new THREE.MeshLambertMaterial({ color: 0x5C3A21 })
        //   obj.children.forEach(function (child) {
        //     child.material = material
        //     child.geometry.computeFaceNormals()
        //     child.geometry.computeVertexNormals()
        //   })
        //   // 模型放大一百倍
        //   obj.scale.set(80, 80, 80)
        //   // console.log(obj)
        //   scene.add(obj)
        // })

        /**
         * 光源设置
         */
        // 点光源
        var point = new THREE.PointLight(0xcccccc)
        point.position.set(-80, 0, 200) // 点光源位置
        scene.add(point) // 点光源添加到场景中
        // 环境光
        var ambient = new THREE.AmbientLight(0xcccccc)
        scene.add(ambient)
        /**
         * 相机设置
         */
        var width = 500 // 窗口宽度
        var height = 400 // 窗口高度
        var k = width / height // 窗口宽高比
        var s = 80 // 三维场景显示范围控制系数，系数越大，显示的范围越大
        // 创建相机对象
        // var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 800)
        var camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000)
        // camera.position.set(200, 300, -300) // 设置相机位置
        camera.position.set(0, -300, 0) // 设置相机位置
        camera.lookAt(scene.position) // 设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer()
        renderer.setSize(width, height) // 设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1) // 设置背景颜色
        container.innerHTML = ''
        container.appendChild(renderer.domElement) // body元素中插入canvas对象

        // 渲染函数
        function render() {
          renderer.render(scene, camera) // 执行渲染操作
          requestAnimationFrame(render)// 请求再次执行渲染函数render，渲染下一帧
        }
        render()
        var controls = OrbitControls(camera, renderer.domElement)// 创建控件对象
        // console.log(controls)
        controls.addEventListener('change', render)
      }
    }
  }
</script>
<style scoped lang="less">
  .tips {
    height: 30px;
    line-height: 30px;
    font-weight: 700;
    color: #303133;
  }

  #model-canvas {
    display: flex;
    justify-content: center;
  }

  .model-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .model-container .btn {
    margin-top: 20px;
  }

  .btn {
    width: 200px;
    height: 50px;
    background-color: pink;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  .info-container {
    display: flex;
    justify-content: c;
    align-items: center;
    margin-bottom: 20px;
  }

  .model_bg_img {
    width: 100%;
  }

  /* .el-row  {
  margin-bottom: 5px;
} */
</style>